<!-- 答题页 -->
<template>
	<view class="wrap">
		<!-- 答题区域 -->
		<!-- 试题三 -->
		<view class="answerItem" v-show="questionIndex == parIndex" v-for="(item,parIndex) in questions">
			<view class="titleBox">
				<text>{{parIndex+1 +'、' + item.blName }}</text>
			</view>
			<!-- 选择题 -->
			<view class="questionChoice" v-if="item.blType == 1">
				<button type="button" class="u-line-1" :class="[choice.className,selectIndex == index ? 'active' : '' ]"
					v-for="(choice,index) in item.options" :key="index" :disabled="isCheck"
					@click="choiceBtn(parIndex,choice,index)">
					{{ choice.blLabel +'、' +choice.blContent }}
				</button>
			</view>
			<!-- 填空题 -->
			<view class="questionPack" v-else>
				<input class="packInput" v-for="(pack,i) in item.options" :key="i" :disabled="isCheck"
					:placeholder="'填空' + (i+1)" v-model="pack.val" :class="pack.className" />
			</view>
			<!-- 确认按钮 -->
			<view class="btnGroup">
				<button type="default" class="nextBtn" v-if="!isCheck"
					@click="confirmBtn_yxp(item,parIndex)">确认</button>
				<button type="default" class="nextBtn" v-else-if="questionIndex+1===5" @tap="$u.throttle(answerSub, 500)">完成</button>
				<button type="default" class="nextBtn" v-else @click="nextBtn">下一题</button>
			</view>
		</view> 
		<!-- 题目序号 -->
		<view class="serialNum">
			{{ questionIndex + 1 + ' / ' +'5' }}
		</view>
		<!-- toast -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wxKey: '',
				jdgId: '', //基地馆Id
				token: '',
				questions: [], //试题
				questionChoice: true, // true为选择题,false为填空题
				questionIndex: 0, //试题序号
				isDisabled: false, //是否禁用
				isCheck: false, //false: 确认按钮; true: 下一步
				selectIndex: 10, //用户选择的是第几项选择题
				totalScore: 0 //总分
			}
		},
		onLoad(option) {
			// 禁用分享
			wx.hideShareMenu()
			console.log('答题页')
			console.log(option)
			this.wxKey = option.wxKey;
			this.jdgId = option.jdgId;
			this.token = option.token;
			uni.request({
				url: this.baseUrl + '/api/question/getList',
				method: 'GET',
				data: {
					redBaseId: this.jdgId
				},
				header: {
					Authorization: uni.getStorageSync('token')
				},
				success: res => {
					console.log(res)
					this.questions = res.data.data.list;
					// 判断第一道题类型
				},
				fail: (err) => {
					console.log(err)
				}
			});
			for (let i = 0; i < this.questions.length; i++) {
				// 判断是否为选择题,如果是,则在这条数据中加入一个可以判断是否选择了选择题的字段 select 默认值为false
				if (this.questions[i].blType === 1) this.questions[i].select = false
				// 初始化className字段
				for (let j = 0; j < this.questions[i].options.length; j++) {
					this.questions[i].options[j].className = ''
				}
			}
		},
		methods: {
			// 选择题选择
			choiceBtn(parIndex, e, i) {
				this.selectIndex = i;
				// 点击了选择按钮时, 字段select=true,依此可以判断用户是否选择了
				if (this.questions[parIndex].blType === 1) this.questions[parIndex].select = true
				this.questions[parIndex].userChoice = e.blLabel; //原数据添加用户选择的选项
				this.questions[parIndex].userChoiceIndex = i; //原数据添加用户选择的序号
			},

			// 下一题
			nextBtn(index) {
				this.selectIndex = 10;
				this.isDisabled = false; //按钮取消禁用
				if (this.questionIndex + 1 < 5) this.questionIndex += 1; //题目序号累加

				this.isCheck = false
			},

			// 填空后进行确认
			confirmBtn_yxp(data, index) {
				// 判断用户是否答题(选择题)
				if (data.blType === 1) {
					if (!data.select) {
						this.showToast('请答题后进行确认', 'warning')
						return
					}
				} else { //填空题
					let judge = data.options.some((item) => item.val == "" || item.val == null || item.val == undefined);
					if (judge) {
						this.showToast('请答题后进行确认', 'warning')
						return
					}

				}
				this.isCheck = true
				// 如果是选择题
				if (this.questions[index].blType == 1) {
					let itemIndex = this.questions[index].userChoiceIndex;
					// 判断用户输入是否正确
					if (data.blCorrect == data.userChoice) {
						this.questions[index].options[itemIndex].className = 'yesOp';
						this.totalScore += 20; //累加分数
					} else {
						this.questions[index].options[itemIndex].className = 'noOp';
					}
				} else {
					// 判断输入的答案是否正确
					for (var i = 0; i < data.options.length; i++) {
						// 判断单个输入是否正确
						if (data.options[i].blContent == data.options[i].val) {
							this.questions[index].options[i].className = 'yesOp';
						} else {
							this.questions[index].options[i].className = 'noOp';
						}
					}
					let judge = data.options.every((item) => item.val === item.blContent);
					if (judge) {
						this.totalScore += 20; //累加分数
					}
					// 这里写填空题答案正确与否的逻辑
					console.log("答案是否正确: ", judge)

				}
			},
			// 答题完成
			answerSub() {
				console.log(this.totalScore)
				// 点亮成功，提交数据并跳转页面
				if (this.totalScore === 100) {
					// 上传数据
					console.log(this.wxKey)
					uni.request({
						url: this.baseUrl + '/api/clearance/add',
						method: 'POST',
						data: {
							wxKey: this.wxKey,
							redBaseId: this.jdgId
						},
						
						header: {
							Authorization: uni.getStorageSync('token'),
							'Content-Type':'application/x-www-form-urlencoded'
						},
						success: res => {
							console.log("777777777777777777777777777777777777777")
							console.log(res);
							let isClearance = res.data.data.allClearance;
							// 跳转到点亮成功页
							console.log("跳转点亮成功")
							console.log(isClearance)
							uni.redirectTo({
								url: '../lightSuccess/lightSuccess?wxKey=' + this.wxKey + "&token=" +
									this.token + '&jdgId=' + this.jdgId+'&isClearance='+isClearance
							});
						},
						fail: (err) => {
							console.log(err)
						}
					});

				} else {
					// 点亮失败，跳到失败页
					uni.redirectTo({
						url: '../lightFail/lightFail?wxKey=' + this.wxKey + '&token=' + this.token + '&accuracy=' +
							this.totalScore
					});
				}
			},
			// 弹出提示
			showToast(title, type, url) {
				this.$refs.uToast.show({
					title: title,
					type: type,
					url: url
				})
			}
		}

	}
</script>

<style scoped lang="scss">
	.wrap {
		width: 100%;
		height: auto;
		min-height: 100vh;
		background: url('https://tuanwei.yjha.com.cn/resource/realName_bg.png') no-repeat;
		background-size: 100% 100%;
		background-position: top center;
		background-color: #eee;

		.titleBox {
			width: 100%;
			height: auto;
			overflow: hidden;
			padding: 50px 30px 20px 30px;
			box-sizing: border-box;

			text {
				display: block;
				font-size: 16px;
				color: #fff;
				font-weight: bold;
				line-height: 30px;
			}
		}

		// 选择题
		.questionChoice {
			width: 100%;
			overflow: hidden;
			padding: 30px 30px 50px 30px;
			box-sizing: border-box;
			height: auto;

			button {
				position: relative;
				width: 100%;
				height: 50px;
				display: block;
				font-size: 14px;
				height: 50px;
				line-height: 50px;
				color: #666;
				font-weight: bold;
				background-color: #fff;
				margin-bottom: 15px;
				box-shadow: 2px 3px 2px #666;
				border-radius: 8px;
				padding: 0 0px;
				box-sizing: border-box;

			}

			.yesOp {
				color: #42ac4f;

				&::after {
					content: '';
					position: absolute;
					right: 10px;
					top: 10px;
					background: url('https://tuanwei.yjha.com.cn/resource/answer_yes.png') no-repeat;
					background-size: auto 30px;
					background-position: top center;
					width: 60px;
					height: 30px;
					transform: scale(1);
					border: none;
					left: auto;
				}
			}

			.noOp {
				color: #ff2424;

				&::after {
					content: '';
					position: absolute;
					right: 10px;
					top: 10px;
					background: url('https://tuanwei.yjha.com.cn/resource/answer_no.png') no-repeat;
					background-size: auto 30px;
					background-position: top center;
					width: 60px;
					height: 30px;
					transform: scale(1);
					border: none;
					left: auto;
				}
			}

			.active {
				opacity: 0.6;
			}
		}

		.questionPack {
			width: 100%;
			height: auto;
			overflow: hidden;
			padding: 30px 30px 50px 30px;
			box-sizing: border-box;

			.packInput {
				position: relative;
				width: 100%;
				height: 34px;
				line-height: 34px;
				background-color: #fff;
				display: block;
				border: 1px #F29100 solid;
				padding: 0px 15px;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				text-align: center;
				margin-bottom: 5px;
				border-radius: 4px;
				border: 2px #FFC107 solid;
				color: #999;
				font-weight: bold;

				&:-moz-placeholder {
					color: #EEEEEE;
				}
			}

			.yesOp {
				color: #42ac4f;

				&::after {
					content: '';
					position: absolute;
					right: 10px;
					top: 5px;
					background: url('https://tuanwei.yjha.com.cn/resource/answer_yes.png') no-repeat;
					background-size: auto 20px;
					background-position: top center;
					width: 60px;
					height: 20px;
					transform: scale(1);
					border: none;
					left: auto;
				}
			}

			.noOp {
				color: #ff2424;

				&::after {
					content: '';
					position: absolute;
					right: 10px;
					top: 5px;
					background: url('https://tuanwei.yjha.com.cn/resource/answer_no.png') no-repeat;
					background-size: auto 20px;
					background-position: top center;
					width: 60px;
					height: 20px;
					transform: scale(1);
					border: none;
					left: auto;
				}
			}

		}

		.questionBox {
			width: 100%;
			height: auto;
			overflow: hidden;
			padding: 30px 30px 50px 30px;
			box-sizing: border-box;
		}

		.nextBtn {
			width: 70%;
			height: 40px;
			line-height: 40px;
			background-color: #fff100;
			margin: 0 auto;
			font-size: 16px;
			color: #c1220e;
			font-weight: bold;
		}
		.btnGroup {
			padding-bottom: 20px;
			box-sizing: border-box;
		}
		.serialNum {
			position: fixed;
			right: 10px;
			top: 10px;
			font-size: 14px;
			color: #fff;
		}
	}
</style>
